<template>
  <div class="article">
    <div v-if="isShowTitle" class="artdetail_title">{{ data.title }}</div>
    <div v-if="isShowInfo" class="artview_info">
      <!-- <span class="item-info">作者: {{ data.author }}</span>
      <span class="item-info">|</span> -->
      <span class="item-info">发布时间: {{ data.date }}</span>
      <span class="item-info">|</span>
      <span class="item-info">{{ data.viewCount }} 次浏览</span>
    </div>
    <div v-if="data.intro" class="artview_intro">{{ data.intro }}</div>
    <div class="artview_content">
      <div class="artview_detail">
        <div align="justify">
          <div v-html="data.content" class="detail-content"></div>
        </div>
      </div>
    </div>
    <div v-if="isShowPrevNext" class="artview_prev_next">
      <div style="margin-top: 20px;">
        <div class="prevlist">
          <span class="up_arrow"></span>
          <span class="prev_next_text prev_txt" style="display: block; float: left; margin-right: 5px">上一篇：</span>
          <a
            v-if="prev.id"
            class="prev_next_link"
            style="display: block; float: left"
            :href="prev.url"
            :title="prev.title"
          >
            {{ prev.title }}
          </a>
          <span v-else class="prev_next_link" style="display: block; float: left">无</span>
          <div style="clear: both"></div>
        </div>
        <div class="nextlist">
          <span class="down_arrow"></span>
          <span class="prev_next_text next_txt" style="display: block; float: left; margin-right: 5px">下一篇：</span>
          <a
            v-if="next.id"
            class="prev_next_link"
            style="display: block; float: left"
            :href="next.url"
            :title="next.title"
          >
            {{ next.title }}
          </a>
          <span v-else>无</span>
          <div style="clear: both"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    data: {
      type: Object,
      default() {
        return {
          id: '',
          title: '',
          content: '',
          author: '',
          date: '',
          viewCount: '',
        }
      }
    },
    prev: {
      type: Object,
      default() {
        return {
          id: '',
          title: '',
          url: ''
        }
      }
    },
    next: {
      type: Object,
      default() {
        return {
          id: '',
          title: '',
          url: ''
        }
      }
    },
    isShowTitle: {
      type: Boolean,
      default: true
    },
    isShowInfo: {
      type: Boolean,
      default: true
    },
    isShowPrevNext: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {}
  }
}
</script>

<style lang="less">
@import "../assets/css/article.less";
</style>
